/*
 * order page
**/
<template>
<div class="mod-items">
	<div class="mod-page-tit">我的订单</div>
	<div class="weui-panel" v-load-more="loadMore">
	    <div class="weui-cells" v-for="el in orderList">
	        <div class="weui-form-preview__hd o-head">
	            <label class="weui-form-preview__label cl3">订单号：{{el.order_sn}}</label>
	            <em class="weui-form-preview__value o-status" :class="{'green': el.shipping_status === '1'}">{{change(el.pay_status, el.shipping_status)}}</em>
	        </div>
	        <div class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd o-img-box">
                    <img class="weui-media-box__thumb" :src="el.icon"/>
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title o-title">{{el.goods_name}}</h4>
                    <p class="weui-media-box__desc o-desc"><span>{{el.goods_sku_attr}}</span><span class="count">x{{el.goods_number}}</span></p>
                </div>
            </div>
	        <div class="weui-form-preview__hd o-head">
	        	<div class="line"></div>
	            <label class="weui-form-preview__label cl6">付款金额</label>
	            <em class="weui-form-preview__value o-status">¥{{el.order_amount}}</em>
	        </div>
	        <div class="weui-form-preview__hd o-head" v-if="el.shipping_status === '1'">
	        	<div class="line"></div>
	            <label class="weui-form-preview__label block">{{el.shipping_name}}</label>
	            <label class="weui-form-preview__label cl6">快递单号：{{el.shipping_num}}</label>
	        </div>
	    </div>
    </div>
    <div class="weui-loadmore" v-if="!touchend">
	  <i class="weui-loading"></i>
	  <span class="weui-loadmore__tips">正在加载</span>
	</div>
	<div class="weui-loadmore weui-loadmore_line" v-if="touchend">
	  <span class="weui-loadmore__tips">没有更多</span>
	</div>
	<div class="mod-footer-place"></div>
    <div class="quick-footernav"><a href="javascript:history.back();" class="ui-btn">&nbsp;&nbsp;返回&nbsp;&nbsp;</a></div>
</div>
</template>
<script>
import {getOrder} from 'src/service/getData'
import {loadMore} from 'src/config/mixin'
export default {
  data () {
    return {
      touchend: false, // 没有更多数据
      currentPage: 1,
      listRow: 5,
      orderList: []
    }
  },
  components: {
  },
  mixins: [loadMore],
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.getOrderList()
    },
    async getOrderList () {
      let data = await getOrder('', this.currentPage, this.listRow)
      if (data.code !== 0) return
      this.orderList = data.data.list
      // 当获取数据小于pageSize，说明没有更多数据，不需要再次请求数据
      if (data.data.list.length < this.listRow) {
        this.touchend = true
        return
      }
      console.log(data)
    },
    change (indexP, indexS) {
      let pay = {0: '未付款', 1: '付款中', 2: '已付款'}
      let shipping = {0: '未发货', 1: '已发货', 2: '已收货', 3: '备货中'}
      return indexP === '2' ? shipping[indexS] : pay[indexP]
    },
    async loadMore () {
      if (this.touchend || this.preventRepeatReuqest) return
      this.preventRepeatReuqest = true
      this.currentPage++
      let data = await getOrder('', this.currentPage, this.listRow)
      if (data.code !== 0) return
      this.orderList = [...this.orderList, ...data.data.list]
      // 当获取数据小于pageSize，说明没有更多数据，不需要再次请求数据
      if (data.data.list.length < this.listRow) {
        this.touchend = true
        return
      }
      this.preventRepeatReuqest = false
    }
  }
}
</script>
<style scoped>
  .o-head{font-size: 0.13rem;color: #333;padding: 4px 10px;}
  .o-head:after{border:none;}
  .line{content: " "; position: absolute;top:0;height:0px; border-top: 1px solid #eee;left: 10px; right: 10px;}
  .o-status{color: #f84d25; font-size: 0.13rem;}
  .o-status.green{color: rgb(115,219,58);}
  .o-img-box{width: 0.6rem; height: 0.6rem;}
  .o-title{color: #666; font-size: 0.12rem;}
  .o-desc{padding-top: 0.1rem; color: #999; font-size: 0.11rem;}
  .o-desc .count{float: right;}
  .cl3{color: #333;-webkit-user-select: all;user-select: all;}
  .cl6{color: #666;-webkit-user-select: all;user-select: all;}
  .block{color: #333;color: #333; width: 100%; text-align: left; text-align-last: left; font-size: 0.14rem; line-height: 0.2rem;}
  /*.mod-items{margin: 0rem !important;background: #efeff4;position: absolute; top: 0; left: 0; overflow-y: auto; bottom: 0; right: 0;}*/
  .weui-panel{background:transparent;margin-top:0;}
  .weui-loadmore__tips{background:#efeff4;;}
</style>
